<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放网站</title>
    <link rel="stylesheet" href="./css/audio.css">
    <!-- <link rel="stylesheet" href="./js/music.js"> -->
</head>
<body background="./image/bg0.png">

    <!-- 上半部分 -->
    <div class="upper-container">
        <!-- 唱歌背景 -->
        <div class="record-container">
            <div class="record-bg">
                <div class="rotate-play"></div>
            </div>
        </div>
        <!-- 音乐介绍 -->
        <div class="introduction-container">
        <div class="text-container">
            <div class="music-title">音乐名称</div>
            <div class="author-container">
                作者：
                <span class="music-author"></span>
            </div>
        </div>
    </div>
    </div>
    <!-- 下半部分 -->
     <div class="audio-box">
        <!-- 放所有控件 -->
         <div class="audio-container">
            <audio src=""></audio>
            <!-- 进度条 -->
             <div class="a-progress">
                <div class="pgs-total">
                    <div class="pgs-play" id="progress"
                    width="10px"></div>
                </div>
             </div>
             <!-- 下排控制按钮 -->
              <div class="a-controls">
                <!-- 时间 -->
                 <div class="time-container">
                    <span class="played-time"> 00:00 </span>
                    &nbsp;/&nbsp;
                    <span class="audio-time"> 00:00 </span>
                 </div>
                 <!-- 中间按钮 -->
                  <div class="center-button-container">
                    <!-- 播放模式切换 -->
                    <div class="center-icon mode"></div>
                    <!-- 上一首 -->
                     <div class="center-icon s-left"></div>
                     <!-- 播放/暂停 -->
                      <div class="center-icon icon-play"></div>
                      <!-- 下一首 -->
                       <div class="center-icon s-right"></div>
                       <!-- 音量调节 -->
                        <div class="center-icon volumn"></div>
                        <!-- 音量进度条 -->
                         <input id="volumn-togger" type="range" name="change" min="0" max="100" step="1" step="50">
                  </div>
                  <!-- 后部按钮 -->
                   <div class="bottom-button-container">
                    <!-- 列表 -->
                     <div class="bottom-icon list"></div>
                     <!-- 倍速 -->
                      <div class="speed">1.0X</div>
                      <!-- MV -->
                       <div class="bottom-icon MV"></div>
                   </div>
              </div>
         </div>
     </div>
<!-- 播放列表 -->
 <div class="close-list"></div>
 <div class="music-list">
    <div class="music-list-container">
        <div class="music-list-title">播放列表</div>
        <hr class="line"/>
        <div class="all-list">
            <div id="music0">洛春赋</div>
            <div id="music1">Yesterday</div>
            <div id="music2">江南烟雨色</div>
            <div id="music2">vision</div>
        </div>
    </div>
 </div>
</body>
</html>
<script src="./js/music.js"></script>